<template>
  <div class="tenant">
    <div class="mains_contain">
      <el-form :inline="true" size="small" label-width="100px">
        <el-form-item>
          <el-button
            type="primary"
            @click="handlerAdd"
            icon="el-icon-plus"
            size="mini"
            v-has="['tenant:add']"
            >新增</el-button
          >
        </el-form-item>
      </el-form>
      <div class="contant">
        <el-table
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          fit
          :max-height="maxHeight"
          border
          stripe
          size="mini"
          highlight-current-row
          :header-cell-style="{ background: '#e5e5e5', color: '#000' }"
        >
          <el-table-column prop="name" label="租户名" sortable />
          <el-table-column prop="tenantCode" label="编号" sortable />
          <el-table-column prop="address" label="地址" sortable />
          <el-table-column prop="status" label="状态" sortable>
            <template slot-scope="scope">
               <span style="color:#F56C6C"  v-if="scope.row.status == '1'">冻结</span>
              <span style="color:#67C23A" v-if="scope.row.status == '0'">正常</span> 

            </template>
          </el-table-column>
          <el-table-column prop="createdTime" label="创建时间" sortable>
            <template slot-scope="scope">
              {{ scope.row.createdTime }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="250" align="center">
            <template slot-scope="{ row, $index }">
              <el-button
                type="text"
                size="mini"
                @click="handlerUpdate(row)"
                v-has="['tenant:edit']"
                icon="el-icon-edit"
                >修改</el-button
              >
              <el-button
                type="text"
                style="color:#F56C6C"
                size="mini"
                icon="el-icon-delete"
                v-has="['tenant:delete']"
                @click="handleDelete(row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div style="text-align: right">
          <pagination
            v-show="pagination.total > 0"
            :limit.sync="pagination.pageSize"
            :page.sync="pagination.page"
            :total="pagination.total"
            @pagination="getPageList"
          />
        </div>
      </div>
    </div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="500px" :close-on-click-modal="false">
      <el-form
        ref="form"
        :model="form"
        label-width="100px"
        :inline="false"
        size="small"
        :rules="rules"
      >
        <el-form-item label="租户名" prop="name">
          <el-input v-model="form.name" clearable />
        </el-form-item>
        <el-form-item label="编号" prop="tenantCode">
          <el-input v-model="form.tenantCode" clearable />
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input type="textarea" v-model="form.address" clearable />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio label="0">正常</el-radio>
            <el-radio label="1">冻结</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div style="text-align: right">
        <el-button type="primary" @click="handlerSave" size="small"
          >保存</el-button
        >
        <el-button @click="dialogVisible = false" size="small">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as api from "@/api/sys/tenant";

export default {
  comments: {},
  props: {},
  data() {
    return {
      activeValue: "0",
      inactiveValue: "1",
      title: "",
      dialogVisible: false,
      form: {},
      multipleSelection: [],
      tableData: [],
      pagination: {
        total: 1,
        page: 1,
        pageSize: 10,
      },
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        realName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        tenantCode:[{ required: true, message: "请输入编号", trigger: "blur" }]
      },
    };
  },
  computed: {
    maxHeight() {
      var curHeight =
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
      return curHeight - 280;
    },
  },
  created() {
    this.getPageList();
  },
  mounted() {},
  methods: {
    //删除
    handleDelete(row) {
      this.$confirm("此操作将永久删除该租户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          api.deleteId(row.id).then((resp) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            if ((this.pagination.total - 1) % this.pagination.pageSize == 0) {
              if (this.pagination.page > 1) {
                this.pagination.page = this.pagination.page - 1;
              }
            }
            this.search();
          });
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消删除",
          // });
        });
    },
    // 复选框事件
    handleSelectionChange(val) {
      // this.multipleSelection = val;
    },
    getPageList() {
      this.search();
    },
    search() {
      const p = Object.assign({}, this.pagination);
      api.page(p).then((resp) => {
        this.tableData = resp.data.list;
        this.pagination = resp.data.pagination;
        this.pagination.page = resp.data.pagination.current;
      });
    },
    handlerAdd() {
      this.title = "新增";
      this.dialogVisible = true;
      this.form = {
        status: "0",
      };
    },
    change(value) {
      console.log(value);
    },
    handlerUpdate(row) {
      this.title = "修改";
      this.dialogVisible = true;
      // console.log(row);
      // this.form = row;
      api.check(row.id).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.form = res.data;
        }
      });
    },
    handlerSave() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id) {
            api.update(this.form).then((resp) => {
              this.dialogVisible = false;
              this.getPageList();
            });
          } else {
            api.save(this.form).then((res) => {
              if(res.code=='500'){
                this.$message({
                  type:'warning',
                  message:res.message
                })
              }else{
                this.dialogVisible = false;
                this.getPageList();
              }
            });
          }
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.tenant {
  padding: 20px;
  .curHeader {
    position: relative;
    height: 40px;
    .searcherBox {
      position: absolute;
      right: 0;
      top: 0;
    }
  }
}
</style>
